<template>
	<view class="container-bg" :style="{position: isScreen ? 'fixed':'' }">
		<u-sticky customNavHeight="0">
			<u-navbar leftIcon=" " bgColor="#0a0816"  placeholder :autack="true" placeholder>
				<template slot="center">
					<view class="navber-box">
						<u-tabs bgColor="#0a0816" @click="hanldeType" :inactiveStyle="{fontSize:'36rpx',color:'#C9C9C9'}"
							:activeStyle="{fontSize:'40rpx',color:'#9f5ff6'}" :itemStyle="{ height: '70rpx',color:'#C9C9C9' }"
							:scrollable="false" :lineWidth="0" :duration="200" lineColor="#190f41"
							:list="tabList"></u-tabs>
					</view>
				</template>
			</u-navbar>
			<view class="pad-left-right-26 pad-top-10">
				<view class="search-box" @click="hanldeSearch">
					<u-search @custom="hanldeSearch" :actionStyle="{color:'#fff',height:'82rpx',lineHeight:'82rpx'}"
						searchIconColor="#fff" placeholderColor="#fff" bgColor="transparent" shape="square"
						placeholder="搜索藏品"></u-search>
						<!-- 、盲盒 -->
				</view>
			</view>
			<view class="tab-box pad-left-right-26 centerXY ">
				<view class="flex-w"  >
					<u-tabs v-show="!isScreen" @click="handelTypeTab" :inactiveStyle="{fontSize:'28rpx',color:'#C9C9C9'}"
						:activeStyle="{fontSize:'32rpx',color:'#9f5ff6'}" :lineWidth="25" :scrollable="true" lineColor="#9f5ff6"
						:current="current" :duration="200" :list="careList">
					</u-tabs>
				</view>
				<!-- <view class="color-white" @click="hanldeScreen">
					<view :class="isScreen ? 'thinking' : '' "
						class="font-26 btn pad-left-right-16 radius6 pad-top-bottom-6 centerY">
						<text>筛一筛吧</text>
						<u-icon :color="isScreen ? 'thinking' : '' " class="mar-left-10" name="arrow-down"
							size="10"></u-icon>
					</view>
				</view> -->
			</view>
		</u-sticky>

		<view class="">
			<!-- 筛选 -->
			<view class="screen-box centerY">
				<view class="screen-list-box" v-show="isScreen">
					<view class="bg-black screenBox pad-16">
						<view class="font-28 color-white">藏品系列（单选）</view>
						<view class="screen-list rowW pad-top-bottom-20 gap17">
							<view @click="hanldeSeries(index,item.id)" v-for="(item,index) in seriesList"
								:class="seriesInx == index ? 'color-theme' : ''" :key="index"
								class="font-24 radius8 item-bg pad-left-right-30 pad-top-bottom-18">
								<image class="select" v-if="seriesInx == index" src="../../static/icon/select.png">
								</image>
								<text>{{item.name}}</text>
							</view>
						</view>
						<view class="font-28 color-white mar-top-30">排序规则（单选）</view>
						<view class="screen-list rowW pad-top-bottom-20 gap17">
							<view @click="hanldeScreenSelect(index,item.value)" v-for="(item,index) in screenList"
								:class="screenSelect == index ? 'color-theme' : ''" :key="index"
								class="font-24 radius8 item-bg pad-left-right-30 pad-top-bottom-18">
								<image class="select" v-if="screenSelect == index" src="../../static/icon/select.png">
								</image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>

					<view class="button-box centerY bg-black pad-left-right-16 gap30">
						<view class="ht_btn_white" @click="hanldeResetting">重置</view>
						<view class="ht_btn_bar" @click="hanldeDefine">确定</view>
					</view>
				</view>
			</view>

			<view v-if="list.length > 0" class="pad-left-right-26 mar-top-30">
				<goods :list="list" @click="hanldeGoodsList"></goods>
			</view>
			<u-empty marginTop="100" v-if="list.length == 0" text="" icon="../../static/image/empty.png"></u-empty>
			<u-loadmore margin-top="30" v-if="list.length > 0" :status="pageStatus" color="#8C9FAE"
				iconColor="#8C9FAE" />

			<my-popup content="您还未登录,是否立即登录？" :show="isPopup" @cancel="isPopup = false"
				@confirm="hanldeLogin"></my-popup>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		seriesAll,
		groupPageList
	} from '@/config/api.js'
	export default {
		data() {
			return {
				keyword: "",
				// 弹框固定
				isScreen: false,
				// 获取系列
				seriesList: [],
				// 藏品筛选
				careList: [{
						name: '我的关注',
						id: -1
					},
					{
						name: '全部藏品',
						id: ''
					}
				],
				// 藏品列表
				list: [],
				// 藏品盲盒切换
				tabList: [{
						name: '数字藏品',
						id: 1
					},
					{
						name: '数字盲盒',
						id: 2
					}
				],
				// tba 样式
				inactiveStyle: {
					background: 'rgb(240 241 244)',
					padding: '8rpx 20rpx',
					fontSize: '24rpx',
					borderRadius: '24rpx'
				},
				activeStyle: {
					color: '#FFFFFF',
					background: '#df0007',
					padding: '8rpx 20rpx',
					fontSize: '24rpx',
					borderRadius: '24rpx'
				},
				// 加载中状态
				pageStatus: "loadmore",
				// 列表传参
				ps: 10,
				page: 1,
				// 后台page参数
				pageData: {},
				sort: 'goods_id,desc',
				series_id: '',
				// 盲盒还是藏品： 1藏品，2盲盒 
				type: 1,
				// 筛选数据
				screenList: [{
					value: 'goods_id,desc',
					name: '最新上架'
				}, {
					value: 'min_price,asc',
					name: '价格升序'
				}, {
					value: 'min_price,desc',
					name: '价格降序'
				}, {
					value: 'market_cnt,asc',
					name: '流通量升序'
				}, {
					value: 'market_cnt,desc',
					name: '流通量降序'
				}],
				// 选中筛选
				screenSelect: -1,
				// 是否登录弹窗
				isPopup: false,
				// tab默认选择
				current: 1,
				seriesInx: -1,
				offsetTop: 0
			}
		},
		onLoad() {
			this.getSeriesList();
			this.setOffestTop();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			this.getList();
		},
		// 上拉加载更懂
		onReachBottom() {
			if (this.pageData.next_page_url) {
				this.getList();
			}
		},
		methods: {
			setOffestTop() {
				// #ifdef APP-PLUS
				let systemInfo = uni.getSystemInfoSync()
				let topPx = systemInfo.statusBarHeight // 顶部状态栏+沉浸式自定义顶部导航
				this.offsetTop = topPx / (uni.upx2px(topPx) / topPx) // px转rpx
				// #endif
			},
			// 确定
			hanldeDefine() {
				this.page = 1;
				this.list = [];
				this.isScreen = false;
				this.getList();
			},
			// 重置
			hanldeResetting() {
				this.sort = 'goods_id,desc';
				this.series_id = '';
				this.seriesInx = -1;
				this.screenSelect = -1;
				this.page = 1;
				this.list = [];
				this.isScreen = false;
				this.getList();
			},
			// 返回实体商城
			hanldeReturn() {
				uni.switchTab({
					url: uni.getStorageSync('path')
				})
			},
			// 盲盒藏品切换
			hanldeType(e) {
				this.page = 1;
				this.list = [];
				this.type = e.id;
				this.getList();

				if (e.id == 1) {
					this.careList[1].name = '全部藏品'
				} else if (e.id == 2) {
					this.careList[1].name = '全部盲盒'
				}
			},
			// 去登录
			hanldeLogin() {
				this.isPopup = false;
				uni.navigateTo({
					url: '/pages/my/login'
				})
			},
			// 筛选系列
			hanldeSeries(index, value) {
				this.seriesInx = index;
				this.series_id = value;
			},
			// 切换筛选
			hanldeScreenSelect(index, value) {
				this.screenSelect = index;
				this.sort = value;
			},
			// 切换系列
			handelTypeTab(e) {
				this.list = [];
				this.page = 1;
				this.series_id = e.id;
				this.getList();
			},
			// 跳转去搜索页面
			hanldeSearch() {
				uni.navigateTo({
					url: '/pages/market/search'
				})
			},
			// 跳转详情
			hanldeGoodsList(goods_id) {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/market/marketGoodsList?goods_id=' + goods_id
					})
				} else {
					this.isPopup = true;
				}
			},
			// 打开筛选
			hanldeScreen() {
				this.isScreen = !this.isScreen;
			},
			// 获取系列
			getSeriesList() {
				seriesAll().then(res => {
					let {
						lists
					} = res.data;
					
					this.careList = this.careList.concat(lists);
					this.seriesList = lists;
					
					this.getList();
				})
			},
			// 获取藏品列表
			getList() {
				let pageInfo = {
					page: this.page,
					ps: this.ps,
					type: this.type,
					series_id: this.series_id,
					sort: this.sort
				}
				groupPageList(pageInfo).then(res => {
					// 结束下拉刷新
					uni.stopPullDownRefresh();

					let {
						data
					} = res;
					this.pageData = data;
					this.page = data.current_page + 1;
					this.pageStatus = 'loadmore'

					this.$nextTick(() => {
						this.list = this.list.concat(data.data);
					})

					// 没有更多了
					if (this.pageData.next_page_url == null) {
						this.pageStatus = 'nomore'
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container-bg {
		background-image: url('../../static/image/my-bg.png');
		width: 751rpx;
		// background-color: $uni-bg-black;
		background-size: cover;
		background-repeat: no-repeat;
		box-sizing: border-box;
		min-height: 100vh;

		.btn {
			border: 1px solid #e2e2e2;
			background: rgba(0, 0, 0, .02);
		}

		.thinking {
			border: 1px solid #e2e2e2;
			background: rgba(252, 16, 3, .05);
			color: $uni-theme;
		}

		.screenBox {
			max-height: 440rpx;
			overflow-y: scroll;
		}

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
		}

		::v-deep .u-sticky__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
		}

		.search-box {
			// background: rgba(255, 255, 255, .2);
			background: $uni-bg-theme1;
			margin: 0rpx 0 30rpx;
			border-radius: 12rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
		}

		.tab-box {
			// background-color: #0a0816;
			border-radius: 30rpx 30rpx 0 0;
			height: 88rpx;
		}

		.navber-box {
			width: 420rpx;
		}

		.search {
			width: 88rpx;
			height: 88rpx;
		}

		.more {
			width: 28rpx;
			height: 28rpx;
		}

		.button-box {
			padding: 40rpx 50rpx;
			text-align: center;
			border-radius: 0 0 30rpx 30rpx;

			.ht_btn_white {
				background: #ebebeb;
				border-radius: 8rpx;
				box-sizing: border-box;
				color: #000;
				font-family: PingFang HK;
				font-size: 32rpx;
				font-style: normal;
				font-weight: 500;
				height: 90rpx;
				line-height: 90rpx;
				width: 100%;
			}

			.ht_btn_bar {
				background: $uni-bg-theme;
				border-radius: 8rpx;
				box-sizing: border-box;
				color: #000;
				font-family: PingFang HK;
				font-size: 32rpx;
				font-style: normal;
				font-weight: 500;
				height: 90rpx;
				line-height: 90rpx;
				width: 100%;
				color: white;
			}
		}


	}

	.screen-box {
		position: relative;

		.screen-list-box {
			width: 100%;
			position: absolute;
			top: 0rpx;
			z-index: +99;
			height: 100vh;
			background: rgba(0, 0, 0, .02);
		}
	}

	.item-bg {
		background: #f4f4f4;
		position: relative;
		overflow: hidden;

		.select {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			right: 0rpx;
			top: 0rpx;
		}
	}
</style>